<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="项目">
          <el-select
            v-model="formData.project"
            placeholder="项目"
            @change="getTestPlainList"
          >
            <el-option
              v-for="item in projectOptions"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="测试计划">
          <el-select v-model="formData.plain" placeholder="测试计划">
            <el-option
              v-for="item in testplainOptions"
              :key="item.plainId"
              :label="item.testPlainName"
              :value="item.plainId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryTestcasePlain">生成</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">更新</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="downloadTestcase">下载</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">删除</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="testcasetable">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-table
            ref="multipleTable"
            :data="testCases"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @row-click="handleSelected"
            @select="getSelected"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="标题">
              <template slot-scope="scope">{{ scope.row.title }}</template>
            </el-table-column>
          </el-table>
        </el-col>

        <el-col :span="16">
          <div>
            <i class="el-icon-circle-plus" font-size="24"></i>
            <i class="el-icon-remove" font-size="24"></i>
          </div>
          <el-table :data="currentTestcase">
            <el-table-column label="步骤">
              <template slot-scope="scope">
                <el-input
                  type="textarea"
                  v-model="scope.row.step"
                  autosize
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="预期结果">
              <template slot-scope="scope">
                <el-input
                  type="textarea"
                  v-model="scope.row.result"
                  autosize
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getProjects, getTestPlain } from "@/api/project";
import { queryFile } from "@/api/file";
import { getTestcasePlain, exportTestcase } from "@/api/testcase";
export default {
  data() {
    return {
      formData: {
        project: "",
        plain: "",
      },
      projectOptions: [],
      testplainOptions: [],
      currentTestcase: [],
      testCases: [],
      selectTestcase: [],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleSelectionChange() {},

    getTestPlainList(value) {
      getTestPlain(value).then((res) => {
        this.testplainOptions = res.data;
      });
    },

    queryTestcasePlain() {
      getTestcasePlain(this.formData.plain).then((res) => {
        const testcases = res.data;
        let testcaseArray = [];
        for (let testcase of testcases) {
          const { id, title, description } = testcase;
          let obj = {
            id,
            title,
            description: JSON.parse(description),
          };
          testcaseArray.push(obj);
        }
        this.testCases = testcaseArray;
      });
    },

    handleSelected(row, col, event) {
      console.log(row);
      let list = this.testCases.filter((item) => {
        return item.id === row.id;
      });
      this.currentTestcase = list[0].description;
    },
    getSelected(selection, row) {
      this.selectTestcase = selection;
    },
    downloadTestcase() {
      let idList = [];
      this.selectTestcase.forEach((item) => {
        idList.push(item.id);
      });
      exportTestcase(idList).then((res) => {
        const { data, headers } = res;
        const fileName = headers["content-disposition"].replace(
          /\w+;filename=(.*)/,
          "$1"
        );
        const blob = new Blob([data], { type: headers["content-type"] });
        let dom = document.createElement("a");
        let url = window.URL.createObjectURL(blob);
        dom.href = url;
        dom.download = decodeURI(fileName);
        dom.style.display = "none";
        document.body.appendChild(dom);
        dom.click();
        dom.parentNode.removeChild(dom);
        window.URL.revokeObjectURL(url);
      });
    },
  },
  mounted() {
    getProjects().then((res) => {
      this.projectOptions = res.data;
    });
  },
};
</script>

<style scoped>
.testcasetable {
  height: 100%;
}
.el-table__row .cell{
  padding: 0px;
}
</style>